---
category: Level 2 — Intermediate
created: '2020-03-16'
keywords:
title: Scale a text to fit inside of an element
updated: '2021-05-07'
---

Let's say that we want to scale a text inside a headline:

```html
<div id="headline">Hello World</div>
```

First of all, we need to measure the width of element with its current font size and [text content](https://phuoc.ng/collection/html-dom/get-the-text-content-of-an-element/). For more information, you can take a look at this [post](https://phuoc.ng/collection/html-dom/measure-the-width-of-given-text-of-given-font/).

```js
const measureWidth = function(text, font) {
    // Measure the width of given text for given font
    ...
};

// Query the element
const ele = document.getElementById('headline');

// Get the styles
const styles = window.getComputedStyle(ele);

// Get the font size and font style
const font = styles.font;
const fontSize = parseInt(styles.fontSize);

const measured = measureWidth(ele.textContent, font);
```

Now we can calculate how much the element is scaled by comparing the measured width and the [full width](https://phuoc.ng/collection/html-dom/determine-the-height-and-width-of-an-element/):

```js
const scale = ele.clientWidth / parseFloat(measured);
```

Finally, we set the font size as the element scales up to full width:

```js
const scaleFontSize = Math.floor(scale * fontSize);
ele.style.fontSize = `${scaleFontSize}px`;
```

## Demo

<Playground>
```html
<div style="margin: 3rem 0; padding: 0 0.5rem">
    <div id="headline">Hello World</div>
</div>
```

```js
document.addEventListener('DOMContentLoaded', function () {
    const measureWidth = function (text, font) {
        // Create an element
        const ele = document.createElement('div');

        // Set styles
        ele.style.position = 'absolute';
        ele.style.visibility = 'hidden';
        ele.style.whiteSpace = 'nowrap';
        ele.style.left = '-9999px';

        // Set font and text
        ele.style.font = font;
        ele.innerText = text;

        // Append to the body
        document.body.appendChild(ele);

        // Get the width
        const width = window.getComputedStyle(ele).width;

        // Remove the element
        document.body.removeChild(ele);

        return width;
    };

    // Query the element
    const ele = document.getElementById('headline');

    // Get the styles
    const styles = window.getComputedStyle(ele);

    // Get the font size and font style
    const font = styles.font;
    const fontSize = parseInt(styles.fontSize);

    // Calculate the scale
    const measured = measureWidth(ele.textContent, font);
    const scale = ele.clientWidth / parseFloat(measured);

    const scaleFontSize = Math.floor(scale * fontSize);
    ele.style.fontSize = scaleFontSize + 'px';
});
```
</Playground>

## See also

-   [Determine the height and width of an element](https://phuoc.ng/collection/html-dom/determine-the-height-and-width-of-an-element/)
-   [Get css styles of an element](https://phuoc.ng/collection/html-dom/get-css-styles-of-an-element/)
-   [Get the text content of an element](https://phuoc.ng/collection/html-dom/get-the-text-content-of-an-element/)
-   [Measure the width of given text of given font](https://phuoc.ng/collection/html-dom/measure-the-width-of-given-text-of-given-font/)
-   [Resize the width of a text box to fit its content automatically](https://phuoc.ng/collection/html-dom/resize-the-width-of-a-text-box-to-fit-its-content-automatically/)
-   [Set css style for an element](https://phuoc.ng/collection/html-dom/set-css-style-for-an-element/)
